<template>
    <div>
        <div class="fcRightBox">
            <div class="fcHeader">
                <div class="fcHeader-title-container">
                    <div class="left-part">
                        <div class="title">商品报告 </div>
                        <div class="refresh-data-time"></div>
                    </div>
                    <div class="right-part">

                        <div class="fcHeader-date-pick-container">
                          <el-date-picker class="custom-date-picker"
                                          format="yyyy/MM/dd"
                                          v-model="timerArray"
                                          style="width: 240px"
                                          type="daterange"
                                          align="right"
                                          range-separator="~"
                                          start-placeholder="开始日期"
                                          end-placeholder="结束日期"
                                          @change="queryList"
                                          :picker-options="pickerOptions">
                            <template slot="prefix">
                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                                   class="custom-icon" focusable="false">
                                <path fill="currentColor"
                                      d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                              </svg>
                            </template>
                          </el-date-picker>

                        </div>

                    </div>
                </div>
                <div style="margin-top: 10px">
                    <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
                        <span slot="prefix" class="select-prefix" >时间单位:</span>
                        <el-option v-for="item in sumWaySelectList"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"></el-option>

                    </el-select>
                </div>
            </div>
            <div class="fcHeader-container fcHeader-container-custom-dash">
                <div class="">
                    <div class="contentHeader" >
                      <p style="color:#282c33;font-size: 16px">
                        详细数据
                      </p>
                      <div class="contentHeader_right" style="justify-content: flex-end">
                            <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择" class="select-with-prefix1">
                          <el-option
                              v-for="item in options2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                        <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px;" @click="handleTabClick">重置列宽</el-button>

                      </div>
                    </div>
                    <el-table
                            :data="tableList"
                            style="width: 100%;background: #EBEDF5"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="createTime"
                                label="日期"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="账户"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="promotionPlan"  sortable
                                min-width="130"
                                label="推广计划"   >

                        </el-table-column>
                        <el-table-column
                                prop="promotionUnit"
                                label="推广单元
"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="click"
                                label="产品ID
"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="goodsName"
                                label="商品名称"  sortable
                                min-width="130"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="goodsType"
                                label="产品分类"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="oneClassificationName"
                                label="一级分类名称

"
                                sortable
                                min-width="140">
                        </el-table-column>
                        <el-table-column
                                prop="twoClassificationName"
                                label="二级分类名称

"
                                sortable
                                min-width="140">
                        </el-table-column>
                        <el-table-column
                                prop="threeClassificationName"
                                label="三级分类名称"  sortable
                                min-width="130"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="shortGender"
                                label="短剧男女频"
                                sortable
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="toShow"
                                label="展现"
                                sortable align="right"
                                min-width="140">
                        </el-table-column>
                        <el-table-column
                                prop="click"
                                label="点击

"
                                sortable align="right"
                                min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="consumption"
                                label="消费" align="right" min-width="130"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="clikRate"
                                label="点击率
"
                                sortable
                                align="right" min-width="130">
                        </el-table-column>
                        <el-table-column
                                prop="avgClickPrice"
                                label="平均点击价格
"
                                sortable
                                align="right" min-width="130">
                        </el-table-column>

                    </el-table>
                  <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import ItemMixins from "./item.mixins";
    import * as echarts from 'echarts';
    import {goodsReportList} from '@/services/model/datacenter'

    export default {
        mixins: [ItemMixins],
        data() {
            return {


                isToggleStatus: false,

                chart: null,
                value:'下载',
                sumTypeList:[{
                    value:'消费',
                    label:'消费'},{
                    value:'展示',
                    label:'展示'},{
                    value:'点击',
                    label:'点击'},{
                    value:'平均点击价格',
                    label:'平均点击价格'}],
                options2:[{
                    value:'下载',
                    label:'下载'},{
                    value:'发送邮箱',
                    label:'发送邮箱'}],
                options:[{
                    value:0,
                    label:'合计'
                },{
                    value:1,
                    label:'分时'
                },{
                    value:2,
                    label:'分日'
                },{
                    value:3,
                    label:'分周'
                },{
                    value:4,
                    label:'分月'
                }],
                isSelect:'账户整体',
                activeName: '整体走势',

            };
        },
        methods: {
            async queryList() {
              this.tableList=[]
                this.form.createTime = this.formatDate(this.timerArray[0]);
                this.form.updateTime = this.formatDate(this.timerArray[1]);

                let res = await goodsReportList(this.form)
              const modifiedArray = this.replaceNullWithDash( res.rows);
              this.tableList = modifiedArray|| []

                 this.form.total = Math.ceil(Number(res.total) );
            },

            initChart() {
                this.chart = echarts.init(this.$refs.chart);
                this.chart.setOption({
                    title: {
                        text: 'TOP5计算结果'
                    },
                    tooltip: {},
                    legend: {
                        data:['网站流量', '搜索引擎']
                    },
                    xAxis: {  axisTick: {
            show: false // 隐藏X轴刻度
          },
                        data: ["2023-10-29", "2023-11-21", "2023-12-08", "2023-12-25"]
                    },
                     yAxis: {},   symbol: 'none' ,    // 确保数据点完全隐藏
                    series: [{ lineStyle: {
            color: '#00aaff'  // 设置线条颜色
          },
            itemStyle: {
            color: '#00aaff'  // 设置线条颜色
          },showSymbol: false,
                        name: '计算结果',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        mounted() {
            this.queryList()
        },
    };
</script>
<style>
</style>
<style scoped lang="less">
    .fcRightBox {
        height: 100%;
        width: calc(100vw - 240px);

        .fcHeader {
            background: #fff;
            border-radius: 6px;
            padding: 16px 24px 20px;
            margin-bottom: 24px;

            .fcHeader-title-container {

                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;

                .left-part {

                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .title {
                        font-size: 20px;
                        color: #282c33;
                    }

                    .refresh-data-time {
                        display: inline-block;
                        margin-bottom: 4px;
                    }

                }

                .right-part {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .baidu-market-tip {
                        color: #a8b0bf;
                        font-size: 12px;

                        .baidu-market-name {
                            color: #0052cc;
                        }
                    }

                    .fcHeader-date-pick-container {
                        margin-left: 12px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        align-items: center;

                        /deep/ .el-checkbox {
                            margin-left: 12px;
                        }
                    }
                }
            }
        }

        .fcHeader-container-custom-dash {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .fcHeader-container {
            position: relative;
            background: #fff;
            border-radius: 6px;
            padding: 24px;
            padding-top: 12px;

            .fcHeader-container-title-box {
                position: absolute;
                right: 24px;
                top: 20px;
                height: 28px;
                display: flex;
                align-items: center;

                .fcHeader-container-title-tip {
                    font-size: 12px;
                    color: #a8b0bf;
                    z-index: 9;
                }
            }
        }

        .account-report-radio-container {
            width: calc(100% - 48px);
            display: flex;

            overflow: auto;

            .account-report-radio-card {
                min-width: 208px;
                padding: 12px 16px;
                border-radius: 6px;
                border: 1px solid #c4daff;
                background: #fff;
                margin-right: 16px;
                cursor: pointer;
                color: #545b66;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;

                .account-report-radio-card-base {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .account-report-radio-card-base-cost {
                        display: flex;
                        align-items: center;
                        color: #282c33;
                        font-weight: 500;

                        .account-report-radio-card-base-cost-num {
                            font-size: 20px;
                            line-height: 28px;
                            margin: 0 4px;
                        }
                    }
                }
            }

            .account-report-radio-card-selected {
                border: 1px solid #0054e6;
                color: #0054e6;
                .account-report-radio-card-base-cost {
                    color: #0054e6;
                }
            }

        }
    }
</style>
<style scoped>
    .dashboard .box-card {
        margin-bottom: 20px;
    }

    .dashboard .text-item {
        padding: 20px 0;
        text-align: center;
    }

    .dashboard .number {
        font-size: 24px;
        color: #333;
    }

    .dashboard .change {
        font-size: 14px;
        color: #333;
    }

    .dashboard .change el-icon {
        color: #67C23A;
    }

    .chart {
        width: 100%;
    }
    .contentHeader{
        display: flex;
        justify-content: space-between;
        align-items:center;
        margin-bottom: 10px;

    }
    .contentHeader_right{
        width:500px;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
</style>
